<template>
  <div class="basic-line-container" ref="echarts_instance"></div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Component, Prop, Ref, Watch } from 'vue-property-decorator'
import * as echarts from 'echarts'
import { SeriesOption } from 'echarts'
import { Getter } from 'vuex-class'
import { Dictionary } from 'vue-router/types/router'
import { deepClone } from '@/utils/specificFunc'
type EchartsOptions = echarts.EChartsOption
@Component
class BasicLine extends Vue {
  @Getter('theme') theme!: 'dark' | 'light'
  @Ref() echarts_instance!: HTMLElement
  @Prop({ required: true }) series!: Dictionary<number[]>
  @Prop({ required: true }) xAxis!: string[]
  chart: echarts.ECharts | null = null
  get FormatedSeriesData(): SeriesOption[] {
    const copiedSeries = deepClone(this.series)
    return Object.keys(copiedSeries).map(key => {
      return {
        name: key,
        type: 'line',
        stack: key,
        data: copiedSeries[key]
      }
    })
  }
  @Watch('theme')
  theme_handler() {
    this.initEcharts()
  }
  @Watch('series', { deep: true })
  series_handler() {
    this.initEcharts()
  }
  mounted() {
    this.initEcharts()
  }
  initEcharts() {
    const echartsOption: EchartsOptions = {
      tooltip: {
        trigger: 'axis',
        textStyle: {
          align: 'left'
        }
      },
      legend: {
        left: 0,
        textStyle: {
          color: this.theme === 'dark' ? '#ffffff' : '#555555'
        }
      },
      grid: {
        left: '4%',
        right: '4%',
        bottom: '2%',
        containLabel: true
      },
      toolbox: {
        itemSize: 12,
        feature: {
          saveAsImage: {
            title: '',
            icon: 'path://M427.968,192v644.202667l-0.810667,5.781333c-1.152,7.210667-2.304,8.704-8.64,17.002667l-7.168,3.925333c-15.914667,8.490667-18.282667,7.168-38.4-3.925333L138.666667,624.533333l45.269333-45.226666,180.032,180.138666V192h64zM842.666667,714.666667v64h-320v-64h320z,m-64-149.333334v64h-256v-64h256z,m-64-149.333333v64h-192v-64h192z,m-64-149.333333v64h-128v-64h128z',
            iconStyle: {
              color: this.theme === 'dark' ? '#ffffff' : '#555555',
              borderWidth: 0
            }
          }
        },
        iconStyle: {
          color: this.theme === 'dark' ? '#ffffff' : '#555555'
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: this.xAxis
      },
      yAxis: {
        type: 'value',
        min: function(value) {
          // const minValue = value.min.toFixed(0)
          // const bit = Math.pow(10, minValue.length - 1)
          // return Math.floor(Number(minValue) / bit) * bit
          return value.min
        }
      },
      series: this.FormatedSeriesData,
      textStyle: {
        color: this.theme === 'dark' ? '#ffffff' : '#555555'
      }
    }
    if (!this.chart) this.chart = echarts.init(this.echarts_instance)
    this.chart.setOption(echartsOption, true)
    this.chart.resize()
    window.addEventListener('resize', () => {
      if (this.chart) this.chart.resize()
    })
  }
}
export default BasicLine
</script>

<style lang="less" scoped>
.basic-line-container {
  width: 100%;
  height: 100%;
}
</style>
